<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getTestDetailById, getTestResult, getAllHealthTest } from '@/services/healthTest.ts'
import type { TestList } from '@/types/healthTest'

const messagelist = ref<TestList[]>()

const openTest = (value: TestList) => {
  if (value.testType === '1') {
    uni.navigateTo({
      url: `/pages/health/componets/FourthChoiceTest?htId=${value.htId}&testTitle=${value.testTitle}`,
    })
  } else if (value.testType === '2') {
    uni.navigateTo({
      url: `/pages/health/componets/DoubleChoiceTest?htId=${value.htId}&testTitle=${value.testTitle}`,
    })
  }
}
const select = async () => {
  const res = getAllHealthTest()
  messagelist.value = (await res).data
}

onMounted(select)
</script>

<template>
  <view
    class="card"
    v-for="index in messagelist"
    @tap="openTest(index)"
    :style="{ backgroundImage: 'url(' + index.testImage + ')' }"
  >
    <view class="title">{{ index.testTitle }}</view>
    <view class="ask">{{ index.testAsk }}</view>
    <view class="mes">已经有{{ index.testCount }}人测试</view>
    <view class="openTest">立即测试</view>
  </view>
</template>

<style lang="scss" scoped>
.card {
  background-color: rgb(239, 238, 238);
  height: 350rpx;
  margin: 15px;
  border-radius: 15rpx;
  padding: 70rpx 60rpx;

  .title {
    font-size: 22px;
    margin-bottom: 10rpx;
    letter-spacing: 4px;
  }

  .ask {
    font-size: 16px;
    color: #3a3c41;
    margin-bottom: 18rpx;
    letter-spacing: 2rpx;
  }

  .mes {
    font-size: 12px;
    color: #777f8f;
    margin-bottom: 25rpx;
  }

  .openTest {
    background-color: rgb(239, 122, 49);
    width: 35%;
    height: 60rpx;
    border-radius: 30rpx;
    color: #fef9f5;
    font-size: 14px;
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
  }
}
</style>
